<template>
  <view class="order-page">
    <!-- 状态标签栏 -->
    <view class="status-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'all' }"
        @click="currentTab = 'all'"
      >
        全部
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'sold' }"
        @click="currentTab = 'sold'"
      >
        已售出
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'received' }"
        @click="currentTab = 'received'"
      >
        已领取
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'refunded' }"
        @click="currentTab = 'refunded'"
      >
        已退款
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="(order, index) in filteredOrders" 
        :key="index"
        @click="goToDetail(order, index)"
      >
        <!-- 商品展示区域 -->
        <view class="product-area">
          <!-- 单个商品展示（名称+单价+数量） -->
          <view class="single-product" v-if="order.products.length === 1">
            <image 
              class="product-img" 
              :src="order.products[0].image" 
              mode="widthFix"
            ></image>
            <view class="product-info">
              <text class="product-name">{{ order.products[0].name }}</text>
              <text class="product-price">{{ order.products[0].price }}{{ order.products[0].unit }}</text>
              <text class="product-count">×{{ order.products[0].count }}</text>
            </view>
          </view>

          <!-- 多个商品展示（横向滚动图片） -->
          <view class="multi-product" v-if="order.products.length > 1">
            <scroll-view 
              class="product-scroll" 
              scroll-x 
              show-scrollbar="false"
            >
              <view class="product-images">
                <image 
                  class="product-img" 
                  :src="item.image" 
                  mode="widthFix"
                  v-for="(item, i) in order.products" 
                  :key="i"
                ></image>
              </view>
            </scroll-view>
          </view>
        </view>

        <!-- 订单信息区域 -->
        <view class="order-info">
          <text class="order-time">{{ order.time }}</text>
          <text class="order-total">实付：{{ order.totalSymbol }}{{ order.totalPrice }}{{ order.totalUnit }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="order-action">
          <button 
            class="refund-btn" 
            v-if="order.status === 'normal'"
            @click="(e) => handleRefund(index, e)"
          >
            退款
          </button>
          <view 
            class="received-tag" 
            v-if="order.status === 'received'"
          >
            已领取
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的标签
      currentTab: 'all',
      // 订单数据
      orders: [
        {
          status: 'normal', // normal:可退款, received:已领取, refunded:已退款
          time: '2025-5-11 00:00',
          totalPrice: '6.00',
          totalUnit: '元',
          totalSymbol: '¥',
          products: [
            {
              name: '娃哈哈矿泉水',
              price: '3.00',
              unit: '元',
              count: 2,
              image: '/static/chongtui.png' // 请替换为实际图片路径
            }
          ]
        },
        {
          status: 'normal',
          time: '2025-5-11 00:00',
          totalPrice: '10.00',
          totalUnit: '元',
          totalSymbol: '¥',
          products: [
            {
              name: '东方树叶',
              price: '5.00',
              unit: '元',
              count: 2,
              image: '/static/chongtui.png'
            }
          ]
        },
        {
          status: 'normal',
          time: '2025-5-11 00:00',
          totalPrice: '18.00',
          totalUnit: '元',
          totalSymbol: '¥',
          products: [
            {
              name: '东方树叶',
              price: '5.00',
              unit: '元',
              count: 1,
              image: '/static/chongtui.png'
            },
            {
              name: '可口可乐',
              price: '3.00',
              unit: '元',
              count: 1,
              image: '/static/chongtui.png'
            },
            {
              name: '营养快线',
              price: '4.00',
              unit: '元',
              count: 1,
              image: '/static/chongtui.png'
            },
            {
              name: '薯片',
              price: '6.00',
              unit: '元',
              count: 1,
              image: '/static/chongtui.png'
            }
          ]
        },
        {
          status: 'received',
          time: '2025-5-11 00:00',
          totalPrice: '400',
          totalUnit: '积分',
          totalSymbol: '',
          products: [
            {
              name: '东方树叶',
              price: '300',
              unit: '积分',
              count: 2,
              image: '/static/chongtui.png'
            }
          ]
        },
        {
          status: 'received',
          time: '2025-5-11 00:00',
          totalPrice: '10.00',
          totalUnit: '元',
          totalSymbol: '¥',
          products: [
            {
              name: '东方树叶',
              price: '5.00',
              unit: '元',
              count: 2,
              image: '/static/chongtui.png'
            }
          ]
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.goodsSalesRecord')
  	});
  },
  computed: {
    // 根据当前标签筛选订单
    filteredOrders() {
      if (this.currentTab === 'all') {
        return this.orders;
      } else if (this.currentTab === 'sold') {
        return this.orders.filter(order => order.status === 'normal');
      } else if (this.currentTab === 'received') {
        return this.orders.filter(order => order.status === 'received');
      } else if (this.currentTab === 'refunded') {
        // 实际项目中这里会筛选已退款订单
        return [];
      }
      return this.orders;
    }
  },
  methods: {
    // 跳转到详情页
    goToDetail(order, index) {
      // 传递订单数据到详情页
      uni.navigateTo({
        url: `/pages/order/goods-sales-record-detail?orderIndex=${index}&orderData=${encodeURIComponent(JSON.stringify(order))}`
      });
    },
    
    // 处理退款操作
    handleRefund(index, event) {
      // 阻止事件冒泡，避免触发卡片点击
      event && event.stopPropagation && event.stopPropagation();
      const order = this.filteredOrders[index];
      uni.showModal({
        title: '确认退款',
        content: `是否要退款该订单？实付金额：${order.totalSymbol}${order.totalPrice}${order.totalUnit}`,
        confirmText: '确认退款',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中调用退款接口
            // 找到原数组中的索引并更新状态
            const originalIndex = this.orders.findIndex(item => 
              item.time === order.time && item.totalPrice === order.totalPrice
            );
            if (originalIndex !== -1) {
              this.orders[originalIndex].status = 'refunded';
              uni.showToast({
                title: '退款成功',
                icon: 'success'
              });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.order-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 状态标签栏 */
.status-tabs {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.tab-item {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #ff4d4f;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #ff4d4f;
}

/* 订单列表 */
.order-list {
  padding: 10px;
}

/* 订单项 */
.order-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  position: relative;
}

/* 商品展示区域 */
.product-area {
  margin-bottom: 15px;
}

/* 单个商品展示 */
.single-product {
  display: flex;
  align-items: center;
}

/* 商品图片 */
.product-img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 10px;
  object-fit: cover;
}

/* 商品信息 */
.product-info {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 15px;
  color: #333333;
  margin-bottom: 5px;
}

.product-price {
  font-size: 14px;
  color: #ff4d4f;
  margin-right: 8px;
}

.product-count {
  font-size: 14px;
  color: #666666;
}

/* 多个商品展示 */
.multi-product {
  padding: 5px 0;
}

.product-scroll {
  width: 100%;
  white-space: nowrap;
}

.product-images {
  display: inline-flex;
}

.multi-product .product-img {
  margin-right: 8px;
}

/* 订单信息 */
.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #f0f0f0;
}

.order-time {
  font-size: 13px;
  color: #888888;
}

.order-total {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

/* 操作按钮 */
.order-action {
  position: absolute;
  top: 15px;
  right: 15px;
}

.refund-btn {
  width: 60px;
  height: 30px;
  line-height: 30px;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 14px;
  border-radius: 4px;
  border: none;
}

.received-tag {
  width: 60px;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
  color: #888888;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
}
</style>